<template>
    <view :style="'margin-top: ' + config.marginTop * 2 + 'rpx;margin-bottom: ' + config.marginBottom * 2 + 'rpx; padding: 0 ' + config.marginLeftRight * 2 + 'rpx;'">
        <block>
            <view
                class="doub-wrap"
                :style="
                    'background-color: ' +
                    config.bgColor +
                    ';padding: ' +
                    config.paddingTop * 2 +
                    'rpx ' +
                    config.paddingRight * 2 +
                    'rpx ' +
                    config.paddingBottom * 2 +
                    'rpx ' +
                    config.paddingLeft * 2 +
                    'rpx;flex-direction:' +
                    (config.mode === 0 ? 'row' : 'column') +
                    ';height:' +
                    (config.autoHeight === 1 ? 'auto' : config.height * 2 + 'rpx')
                "
            >
                <view
                    :style="
                        'flex: ' +
                        config.flex[index] +
                        ';margin-right: ' +
                        (index < componentData.length - 1 && config.mode === 0 ? config.gutter * 2 : 0) +
                        'rpx;margin-bottom: ' +
                        (index < componentData.length - 1 && config.mode === 1 ? config.gutter * 2 : 0) +
                        'rpx;height: inherit;'
                    "
                    v-for="(element, index) in componentData"
                    :key="index"
                >
                    <view class="phone-component">
                        <diy-wrap @callback="callback" v-if="element.sign === 'diy-wrap'" :componentData="element.data.componentData" :config="element.data.config"></diy-wrap>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
import diyWrap from '../diy-wrap/diy-wrap';
// plugin/components/diy-doub-wrap/diy-doub-wrap.js
export default {
    components: {
        diyWrap
    },
    data() {
        return {
            element: {
                data: {
                    componentData: '',
                    config: ''
                }
            }
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Array
        },
        config: {
            type: Object
        }
    },
    beforeMount() {},
    mounted() {
        // console.log('diy-doub-wrap', this.componentData, this.config);
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        }
    }
};
</script>
<style>
@import './diy-doub-wrap.css';
</style>
